<template lang="html">
  <div class="global">
    <div class="g-content">
      <div class="content" v-for="(item, index) in meterList" :key="index">
        <div class="top">
          <div class="left">
            <span class="one">{{item.district_name + item.building +'栋' + item.room_name}}</span>
            <span class="two">水费：{{item.fee_water}}元/吨</span>
            <span class="two" v-if="item.fee_is_jfpg == '0'">电费：{{item.fee_electricity}}元/吨</span>
            <span class="three" v-else>电费：尖:{{item.fee_electricity_jian}} 峰:{{item.fee_electricity_feng}} 平:{{item.fee_electricity_ping}} 谷:{{item.fee_electricity_gu}}</span>
          </div>
          <div class="right" v-show="item.meter_info.electricity !== '{}' || item.meter_info.electricity['meter_status'] == 0" @click="recover(item)">恢复供电</div>
        </div>
        <div class="bottom">
          <div class="meter" v-if="item.meter_info.water !== '{}'">
            <span class="one">水表</span>
            <div class="two" @click="readWaterMeter(item, index)">抄表</div>
            <span class="three" @click="toWaterDetail(item)">当前读数：{{item.meter_info.water.read_value}} (吨)</span>
            <image @click="toWaterDetail(item)" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180522/2018052203213482625.jpg"></image>
          </div>
          <div class="meter" v-if="item.meter_info.electricity !== '{}'">
            <span class="one">电表</span>
            <div class="two" @click="readEleMeter(item, index)">抄表</div>
            <span class="three" @click="toEleDetail(item)">当前读数：{{item.meter_info.electricity.read_value}} (度)</span>
            <image @click="toEleDetail(item)" src="http://fanglilai-pic.oss-cn-shenzhen.aliyuncs.com/mw690/20180522/2018052203213482625.jpg"></image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import store from '@/store/store'
export default {
  data () {
    return {
      meterList: [],
      read_value: 0
    }
  },
  onLoad () {
    this.opmeterlist()
  },
  computed: {
    renterPhone () {
      return store.state.renterPhone
    }
  },
  methods: {
    // 恢复供电供水
    recover (item) {
      this.opmeterstatus(1, 0, item.meter_water_id, item.district_id, item.room_id, '', 1001, this.renterPhone)
    },
    // 抄水表
    readWaterMeter (item, index) {
      this.opmeterreading(2, item.room_id, item.meter_water_id, index)
    },
    // 炒电表
    readEleMeter (item, index) {
      this.opmeterreading(1, item.room_id, item.meter_electricity_id, index)
    },
    // 跳转详情
    toWaterDetail (item) {
      var address = item.district_name + item.building + item.room_name
      store.commit('setAddress', address)
      this.$router.push({ path: '/pages/meter/water_detail/main', query: { roomId: item.room_id, meterId: item.meter_water_id } })
    },
    toEleDetail (item) {
      var address = item.district_name + item.building + item.room_name
      store.commit('setAddress', address)
      this.$router.push({ path: '/pages/meter/electric_detail/main', query: { roomId: item.room_id, meterId: item.meter_electricity_id } })
    },
    // 水电表列表
    opmeterlist (maxId, minId) {
      var param = {}
      param['max_id'] = maxId
      param['min_id'] = minId
      const opmeterlist = api.opmeterlist(param)
      opmeterlist.then(d => {
        if (d.code === 200) {
          this.meterList = d.data.list
          for (var i = 0; i < this.meterList.length; i++) {
            this.meterList[i].meter_info.electricity = JSON.stringify(this.meterList[i].meter_info.electricity)
            this.meterList[i].meter_info.water = JSON.stringify(this.meterList[i].meter_info.water)
            if (this.meterList[i].meter_info.electricity !== '{}') {
              this.meterList[i].meter_info.electricity = JSON.parse(this.meterList[i].meter_info.electricity)
            }
            if (this.meterList[i].meter_info.water !== '{}') {
              this.meterList[i].meter_info.water = JSON.parse(this.meterList[i].meter_info.water)
            }
          }
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 供电供水验证码
    opmeterstatus (meterType, meterStatus, meterId, districtId, roomId, msgCode, msgCodeType, cellphone) {
      var param = {}
      param['meter_type'] = meterType
      param['meter_status'] = meterStatus
      param['meter_id'] = meterId
      param['district_id'] = districtId
      param['room_id'] = roomId
      param['msg_code'] = msgCode
      param['msg_code_type'] = msgCodeType
      param['cellphone'] = cellphone
      const opmeterstatus = api.opmeterstatus(param)
      opmeterstatus.then(d => {
        if (d.code === 200) {
          console.log('输入验证码')
        } else if (d.code === 4606) {
          wx.showToast({
            title: '账单未支付',
            icon: 'success'
          })
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 抄表接口
    opmeterreading (meterType, roomId, meterId, index) {
      var param = {}
      param['meter_type'] = meterType
      param['room_id'] = roomId
      param['meter_id'] = meterId
      const opmeterreading = api.opmeterreading(param)
      opmeterreading.then(d => {
        if (d.code === 200) {
          if (meterType === 2) {
            this.meterList[index].meter_info.water.read_value = d.data.read_value
          } else if (meterType === 1) {
            this.meterList[index].meter_info.electricity.read_value = d.data.read_value
          }
          wx.showToast({
            title: '抄表成功',
            icon: 'success'
          })
        } else {
          wx.showToast({
            title: '抄表失败',
            icon: 'success'
          })
        }
      })
      .catch((e) => {
        console.log(e)
      })
    }
  }
}
</script>

<style lang="css">
  @import "./energy_manage.css";
</style>
